<template>
    <div class="goods">
        <header>
            <input type="text" placeholder="请输入名称进行搜索" v-model="iptVal" @keyup.enter="serachGoods()">
            <button class="search" @click="serachGoods()">搜索</button>
            <button class="search" @click="resetSearch()">重置</button>
            <div class="right">
                <el-button type="success" v-if="login.idcode == 1 ? true : false" @click="ShowPop(true)">新增</el-button>
                <el-button type="primary" v-if="login.idcode == 1 ? true : false" @click="flushNew()">刷新</el-button>
                <!-- <el-button type="danger" v-if="login.idcode == 1 ? true : false" @click="delgoods()">批量删除</el-button> -->
            </div>
        </header>
        <el-table :data="good.goodsList" style="width: 100%" @selection-change="Delhandle">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="Name" label="名称" width="150" />
            <el-table-column prop="Inputdata" label="入库日期">
                <template #default="scope">
                    <span>{{ scope.row.Inputdata.slice(0, 10) + "/" + scope.row.Inputdata.slice(11, 19) }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="Inventory" label="总库存" width="150" />
            <el-table-column prop="Currinvent" label="当前库存" width="150" />
            <el-table-column prop="Numberofleases" label="被租借次数" v-if="login.idcode == 1 ? true : false" width="150">
                <template #default="scope">
                    <span>{{ scope.row.Inventory - scope.row.Currinvent }}</span>
                </template>
            </el-table-column>
            <!-- v-if="login.idcode == 0 ? true : false" -->
            <el-table-column prop="Name" label="租借请求" v-if="login.idcode == 0 ? true : false">
                <template #default="scope">
                    <el-popconfirm title="确认租借?" @confirm="Rent(scope.row.Id)">
                        <template #reference>
                            <el-button type="primary">租借</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
            <el-table-column prop="Name" label="是否删除货物" v-if="login.idcode == 1 ? true : false">
                <template #default="scope">
                    <el-popconfirm title="确认删除?" @confirm="DelGoodItem(scope.row.Id)">
                        <template #reference>
                            <el-button type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <div class="popup" v-show="popShow" @click.self="ClosePop(false)">
            <el-form label-width="120px" :model="addGoods">
                <header>新增货物<i class="close" @click="ClosePop(false)">X</i></header>
                <el-form-item label="货物名称：" prop="name">
                    <el-input v-model="addGoods.name"></el-input>
                </el-form-item>
                <el-form-item label="入库数量：" prop="addNum">
                    <el-input v-model="addGoods.addNum"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="defineGood()">确认</el-button>
                    <el-button @click="ClosePop(false)">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="addpopup" v-show="addPopup" @click.self="closeAddPopup()">
            <el-form label-width="120px" :model="rentGoods">
                <header>{{ rentName }}</header>
                <!-- <el-form-item label="租借起始时间：" prop="goTime">
                    <el-input v-model="rentGoods.goTime"></el-input>
                </el-form-item> -->
                <el-form-item label="租借时长：" prop="zhiTime">
                    <el-input v-model="rentGoods.zhiTime"></el-input>
                </el-form-item>
                <el-form-item label="租借数量：" prop="number">
                    <el-input v-model="rentGoods.number" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="goRentGoods()">确认</el-button>
                    <el-button @click="closeAddPopup(false)">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, toRefs } from 'vue';
import { useRoute, useRouter } from "vue-router";
import { GoodsStore } from "../store/goods";
import { LoginStore } from "../store/login";
import { userMenu } from "../store/usermenu";
import { GoodsApi, addGoodApi, delGoodApi, RentGoods, serachApi, flushApi } from "../request/api";

const Router = useRouter();
const Route = useRoute();
const good = reactive(GoodsStore());
const login = reactive(LoginStore());
const user = reactive(userMenu())
console.log(login.idcode);
// Currinvent: 97
// Id: 1
// Inputdata: "2023-03-17T09:19:05+08:00"
// Inventory: 100
// Name: "罗生门"
// Numberofleases: 0
GoodsApi().then(res => {
    good.addGoods(res);
})

// 搜索框的内容
let iptVal = ref("");
// 发起搜索
const serachGoods = () => {
    serachApi({
        name: iptVal.value
    }).then(res => {
        good.addGoods(res.title);
    })
    console.log(iptVal.value);
}
// 重置搜索内容
const resetSearch = () => {
    iptVal.value = "";
}
let rentGoods = reactive({
    Id: "",
    zhiTime: "",
    number: "1"
});
let rentName = ref("");
// Rent 用户发起租借打开的表单
const Rent = (val) => {
    addPopup.value = true;
    console.log(addPopup.value);
    rentGoods.Id = val;
    console.log(val);
    console.log(rentGoods.Id);
    // good.goodsList
    for (let i = 0; i < good.goodsList.length; i++) {
        if (good.goodsList[i].Id == val) {
            rentName.value = good.goodsList[i].Name
        }
    }
}
// 空制租借表单显示的控制量
let addPopup = ref(false);
// 用户发起租借请求
const goRentGoods = () => {
    let a = [];
    for (let i in rentGoods) {
        if (rentGoods[i] == "") {
            a.push(false)
        } else {
            a.push(true)
        }
    }
    if (!a.includes(false)) {
        RentGoods({
            goodsid: Number(rentGoods.Id),
            Rentdata: Number(rentGoods.zhiTime),
            userid: Number(user.user.id),
        }).then(res => {
            console.log(res);
            if (res && res.askData.prompt == "OK") {
                ElMessage({
                    message: "租借成功！",
                    type: 'success'
                });
                closeAddPopup();
            }
        })
    } else {
        ElMessage({
            message: "请填写完整！",
            type: 'error'
        });
    }
}
console.log(good.goodsList);
// 关闭租借表单
const closeAddPopup = () => {
    addPopup.value = false;
}
// 管理员的删除货物单选
const DelGoodItem = (val) => {
    delGoodApi(val).then(res => {
        console.log(res);
        if (res.askData.prompt == "ERROR") {
            ElMessage({
                message: "当前货物正在租借中！",
                type: 'error'
            });
        }
        if (res.askData.prompt == "OK") {
            ElMessage({
                message: "删除成功！",
                type: 'error'
            });
            setTimeout(() => {
                Router.go(0);
            }, 1000)
        }
    })
}
// 控制新增表单显示的控制量
let popShow = ref(false);
// 表单对象
let addGoods = reactive({
    name: "",
    addNum: ""
})
// 打开新增表单
const ShowPop = (val) => {
    popShow.value = val;
}
// 关闭新增表单
const ClosePop = (val) => {
    popShow.value = val;
}
// 确认添加货物，发起添加货物的请求
const defineGood = async () => {
    console.log(addGoods);
    // 遍历表单对象，都不为空才发起添加请求
    let a = [];
    for (let key in addGoods) {
        if (addGoods[key] == "") {
            a.push(false);
        }
        if (addGoods[key] != "") {
            a.push(true);
        }
    }
    if (!a.includes(false)) {
        // 发起添加请求
        await addGoodApi({
            name: String(addGoods.name),
            addNum: Number(addGoods.addNum)
        }).then(res => {
            console.log(res);
            if (res.askData.prompt == "OK") {
                ClosePop(false);
                ElMessage({
                    message: "添加成功！",
                    type: 'success'
                });
                setTimeout(() => {
                    Router.go(0)
                }, 1000);
            }
        })
    } else {
        ElMessage({
            message: "输入不规范！",
            type: 'error'
        })
    }
}
// 删除货物的请求
const Delhandle = (val) => {
    console.log(val);
}
// 刷新数据库资源
const flushNew = () => {
    flushApi().then(res => {
        if (res.title) {
            ElMessage({
                message: "刷新成功！",
                type: 'success'
            })
        }
        console.log(res);
    })
}
</script>
 
<style lang = "less" scoped>
.goods {
    header {
        position: relative;

        input {
            height: 40px;
            border: 0;
            border: 1px solid #409EFF;
            box-sizing: border-box;
            margin-left: 40px;
            border-radius: 5px;
            text-indent: 1em;
        }

        input[type=text]:focus {
            outline: none;
        }

        .search {
            border: none;
            height: 40px;
            padding: 0 15px;
            margin-left: 10px;
            background: #409EFF;
            color: #fff;
            cursor: pointer;
            border-radius: 5px;
        }

        .right {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 140px;
            height: 32px;
        }
    }

    :deep(.el-table .cell) {
        text-align: center;
    }

    // is-leaf
    :deep(.el-table .is-leaf .cell) {
        color: #000;
        font-weight: 700;
    }

    .popup {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 3001;
        display: flex;
        justify-content: center;
        align-items: center;

        :deep(.el-form) {
            width: 340px;
            height: 230px;
            background-color: #fff;
            border-radius: 20px;
            padding: 0 60px 0 20px;
        }

        header {
            position: relative;
            line-height: 60px;
            font-size: 18px;
            text-indent: 8.5em;

            .close {
                position: absolute;
                right: -40px;
                top: 0;
                cursor: pointer;
            }
        }
    }

    .addpopup {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 3001;
        display: flex;
        justify-content: center;
        align-items: center;

        :deep(.el-form) {
            width: 340px;
            height: 220px;
            background-color: #fff;
            border-radius: 20px;
            padding: 0 50px 0 50px;

            header {
                text-align: center;
                line-height: 50px;
            }
        }
    }
}
</style>